<script setup>

</script>

<template>
<div class="module">
  <!--四小模块图    -->
  <ul>
    <li>
      <router-link :to="'/home/canteen/canhome'">
        <img src="@/assets/imgs/index1.jpg" width="200px" height="200px" style="border-radius: 10%">
        <h3>进入智慧食堂系统&gt;&gt;</h3>
      </router-link>
    </li>
    <li>
      <router-link :to="'/home/classroom/index'">
        <img src="@/assets/imgs/index2.jpg" width="200px" height="200px" style="border-radius: 10%">
        <h3>进入智慧课程系统&gt;&gt;</h3>
      </router-link>
    </li>
    <li>
      <router-link :to="'/home/freshman/admissionNotice'">
        <img src="@/assets/imgs/index3.jpg" width="200px" height="200px" style="border-radius: 10%">
        <h3>进入智慧迎新系统&gt;&gt;</h3>
      </router-link>
    </li>
    <li>
      <router-link :to="'/home/amusement'">
        <img src="@/assets/imgs/index4.jpg" width="200px" height="200px" style="border-radius: 10%">
        <h3 index="/index/amusement">进入娱乐天地系统&gt;&gt;</h3>
      </router-link>
    </li>
  </ul>
</div>
</template>

<style scoped>
.module{
  width: 90%;
  margin: 0 auto;
}
.module ul{
  display: flex;
  list-style: none;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}
.module ul li{
  transform-origin: center;
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}
.module ul li:hover {
  transform: scale(1.2);
}
</style>